<template>
  <div class="content">
    <!--list-->
    <div v-if="show==1" class="list">

      <Table :columns="columns1" :data="data1"></Table>
    </div>
    <!--空白页-->
    <div v-if="show==0">
      <div style="margin:181px auto 0 auto;width: 160px;height: 163px;">
        <img src="../../assets/images/jilu.png" height="163" width="160"/>
      </div>
      <div style="text-align: center;margin-top:18px;font-size: 18px;color: #3B50A1">
        暂时还没有考试，抓紧时间复习吧！
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

        columns1: [
          {
            title: '序号',
            key: 'letterId',
            align: 'center',
          },
          { align: 'center',
            title: '考试名称',
            key: 'name'
          },
          { align: 'center',
            title: '考试时间',
            key: 'time',
            "width": 120,
          },
          { align: 'center',
            title: '时长(分钟)',
            key: 'frequency'
          },
          { align: 'center',
            title: '错题数',
            key: 'daNum'
          },
          { align: 'center',
            title: '正确率',
            key: 'percent'
          },
          { align: 'center',
            title: '得分',
            key: 'highest'
          },
          { align: 'center',
            title: '查看证书',
            render:(createElement,params)=>{
                return createElement('div', [
                    createElement('Button', {
                        props: {type: 'primary',size: 'small'},
                        style: {marginRight: '5px'},
                        on: {
                          click: () => {
                            this.$router.push({ path:'/wholeCenter/exaemination',query: {exaemName:params.row.name,examId:params.row.id}});
                            }
                            }
                    }, '查看')
                ]);
            }

          }
        ],
        data1: [
        ],
        show:0,//1是有数据0是没数据
      }
    },
    methods: {

      listData(){
        var id=this.$cookies.get('pcexam_id');
        this.$axios({
          url: 'web/personalCenter/examLog/'+id,
          method: 'GET',
          data:{},
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          transformRequest: [function(data) {  //json
            data = JSON.stringify(data);
            return data
          }],
        }).then((response) => {
          console.log(response.data);
          if (response.data.code==500){
            this.$Message.error('考试记录获取失败！')
          }else{
            if(response.data.length==0){
              console.log("无考试记录数据");
              this.show=0;
            }else{
              this.show=1;
              for(var i=0;i<response.data.length;i++){
                this.data1.push({
                  letterId:(i+1),//序号
                  name: response.data[i].name,//考试名称
                  time:response.data[i].beginTime,//考试时间
                  daNum:response.data[i].wrongOfAnswers,//错题数
                  frequency:parseInt(response.data[i].timeCost / 60) + '分' + parseInt(response.data[i].timeCost % 60) + '秒',//时长parseInt(response.data[i].timeCost / 60) + '分' + parseInt(response.data[i].timeCost % 60) + '秒';
                  percent:(response.data[i].correctRate)*100+'%',//正确率
                  highest:response.data[i].grade,//最高分
                  id:response.data[i].id,//考试记录ID
                });
            }
            }
          }
        }).catch((error) => {
          console.log("调取失败500");
          this.$Message.error('考试记录获取失败！')
          this.spinShow=false;
        });
      }
    },
    mounted:function() {
      //渲染列表
      this.listData();


    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .content{
    padding-top: 33px;
  }
  .list{
    width:1089px;
    margin: 0 auto;
  }
</style>
